<template>
  <div class="tables">
    <tbody>
      <tr>
        <th>攻击时间</th>
        <th>类型</th>
        <th>攻击来源</th>
        <th>攻击目的</th>
        <th>风险等级</th>
        <th>方式</th>
      </tr>
      <tr v-for="item in tableData" :key="item">
        <td>{{ item.date }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.source }}</td>
        <td>{{ item.purpose }}</td>
        <td>{{ item.danger }}</td>
        <td>       
          <el-button type="success" size="mini">{{ '阻断' }}</el-button>
        </td>
      </tr>
    </tbody>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2021-05-12",
          name: "DDOS",
          source: "10.10.2.12",
          purpose: "10.10.2.26",
          danger: "高",
        },
        {
          date: "2021-06-18",
          name: "僵尸网络",
          source: "192.168.1.100",
          purpose: "192.168.1.125",
          danger: "高",
        },
        {
          date: "2021-06-15",
          name: "勒索病毒",
          source: "10.10.1.9",
          purpose: "10.10.2.6",
          danger: "高",
        },
        {
          date: "2021-07-15",
          name: "僵尸网络",
          source: "192.168.1.100",
          purpose: "192.168.1.125",
          danger: "高",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="less" scoped>
.tables {
  width: 108%;
  height: 230px;
  font-size: 12px;
  tbody {
    tr {
      color: white;
      th {
        background-color: transparent;
      }

      td {
        text-align: center;
        line-height: 40px;
        padding: 0 2px;
        background-color: transparent;
        &:last-of-type {
          span {
            background-color: #42b455;
            padding: 4px;
          }
        }
      }
      &:nth-of-type(1) {
        td {
          font-weight: bold;
        }
      }
      &:nth-of-type(2n) {
        td {
          background-color: transparent;
        }
      }
    }
  }
}
</style>
